<script lang='ts'>
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    title: {
      type: String,
      default: "提示信息",
    },
    cancel: {
      type: Function,
      default: () => {
        console.log("cancel");
      },
    },
    confirm: {
      type: Function,
      default: () => {
        console.log("confirm");
      },
    },
  },

  setup() {
    const visible = ref<boolean>(false);
    const open = () => {
      visible.value = true;
    };

    const close = () => {
      //   ElMessage("取消");
      visible.value = false;
    };
    return {
      visible,
      open,
      close,
    };
  },
});
</script>
<!-- 模型 -->
<template>
  <div class="">
    <el-dialog
      ref="dialog"
      v-model="visible"
      :title="title"
      width="36%"
      align-center
    >
      <div class="dialogContent">
        <slot name="main"> </slot>
      </div>
      <div class="dialogFooter">
        <slot name="foot">
          <el-button
            @click="
              close();
              cancel();
            "
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="
              close();
              confirm();
            "
            >确定</el-button
          >
        </slot>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.dialogContent {
  padding: 10px;
  box-sizing: border-box;
}

.dialogFooter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #cacaca;
  padding: 15px 0;
}

.dialogFooter :deep(.el-button) {
  margin-right: 10px;
}

::v-deep .el-dialog__header {
  background-color: #2f3e4d;
  margin: 0;
  padding: 15px 20px;
}

:deep(.el-dialog__body) {
  padding: 12px;
}

::v-deep .el-dialog__title {
  color: #fff;
}

:deep(.el-dialog__headerbtn) {
  top: 1;
}
</style>